<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta name="viewport" content="width=device-width" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.js"></script>
    <style>
        .main {
            position: absolute;
            left: 50%;
            /* background-color: #b6fae8; */
        }
        
        .bg {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            animation: turn 4.5s steps(1, end) infinite;
            background-size: 100% 100%;
            background-image: url(http://ilab.imaginelearning.cn/loading/loading_blue_house.png)
        }
        
        .xiaoxiang {
            position: absolute;
            left: 50%;
            top: 65%;
            /* background-color: #fff; */
            /* transform: translate(-50%, -50%); */
            animation: xiaoxiang 3.5s steps(1, start) infinite;
            /* -webkit-animation: xiaoxiang 10s steps(1, start) infinite; */
            /* background-size: 100% 100%; */
            background-image: url(http://ilab.imaginelearning.cn/loading/loading_blue_elephant.png);
        }
        
        @keyframes turn {
            0% {
                background-position: 0 0;
            }
            0% {
                background-position: 0px 0;
            }
            1.9607843137254901% {
                background-position: 1920px 0;
            }
            3.9215686274509802% {
                background-position: 3840px 0;
            }
            5.882352941176471% {
                background-position: 5760px 0;
            }
            7.8431372549019605% {
                background-position: 7680px 0;
            }
            9.803921568627452% {
                background-position: 9600px 0;
            }
            11.764705882352942% {
                background-position: 11520px 0;
            }
            13.72549019607843% {
                background-position: 13440px 0;
            }
            15.686274509803921% {
                background-position: 15360px 0;
            }
            17.647058823529413% {
                background-position: 17280px 0;
            }
            19.607843137254903% {
                background-position: 19200px 0;
            }
            21.568627450980394% {
                background-position: 21120px 0;
            }
            23.529411764705884% {
                background-position: 23040px 0;
            }
            25.49019607843137% {
                background-position: 24960px 0;
            }
            27.45098039215686% {
                background-position: 26880px 0;
            }
            29.41176470588235% {
                background-position: 28800px 0;
            }
            31.372549019607842% {
                background-position: 30720px 0;
            }
            33.333333333333336% {
                background-position: 32640px 0;
            }
            35.294117647058826% {
                background-position: 34560px 0;
            }
            37.254901960784316% {
                background-position: 36480px 0;
            }
            39.21568627450981% {
                background-position: 38400px 0;
            }
            41.1764705882353% {
                background-position: 40320px 0;
            }
            43.13725490196079% {
                background-position: 42240px 0;
            }
            45.09803921568628% {
                background-position: 44160px 0;
            }
            47.05882352941177% {
                background-position: 46080px 0;
            }
            49.01960784313726% {
                background-position: 48000px 0;
            }
            50.98039215686274% {
                background-position: 49920px 0;
            }
            52.94117647058823% {
                background-position: 51840px 0;
            }
            54.90196078431372% {
                background-position: 53760px 0;
            }
            56.86274509803921% {
                background-position: 55680px 0;
            }
            58.8235294117647% {
                background-position: 57600px 0;
            }
            60.78431372549019% {
                background-position: 59520px 0;
            }
            62.745098039215684% {
                background-position: 61440px 0;
            }
            64.70588235294117% {
                background-position: 63360px 0;
            }
            66.66666666666667% {
                background-position: 65280px 0;
            }
            68.62745098039215% {
                background-position: 67200px 0;
            }
            70.58823529411765% {
                background-position: 69120px 0;
            }
            72.54901960784314% {
                background-position: 71040px 0;
            }
            74.50980392156863% {
                background-position: 72960px 0;
            }
            76.47058823529412% {
                background-position: 74880px 0;
            }
            78.43137254901961% {
                background-position: 76800px 0;
            }
            80.3921568627451% {
                background-position: 78720px 0;
            }
            82.3529411764706% {
                background-position: 80640px 0;
            }
            84.31372549019608% {
                background-position: 82560px 0;
            }
            86.27450980392157% {
                background-position: 84480px 0;
            }
            88.23529411764706% {
                background-position: 86400px 0;
            }
            90.19607843137256% {
                background-position: 88320px 0;
            }
            92.15686274509804% {
                background-position: 90240px 0;
            }
            94.11764705882354% {
                background-position: 92160px 0;
            }
            96.07843137254902% {
                background-position: 94080px 0;
            }
            98.03921568627452% {
                background-position: 96000px 0;
            }
            100% {
                background-position: 1920px 0;
            }
        }
        
        @keyframes xiaoxiang {
            0% {
                background-position: -0px 0;
            }
            1.9230769230769231% {
                background-position: -600px 0;
            }
            3.8461538461538463% {
                background-position: -1200px 0;
            }
            5.769230769230769% {
                background-position: -1800px 0;
            }
            7.6923076923076925% {
                background-position: -2400px 0;
            }
            9.615384615384615% {
                background-position: -3000px 0;
            }
            11.538461538461538% {
                background-position: -3600px 0;
            }
            13.461538461538462% {
                background-position: -4200px 0;
            }
            15.384615384615385% {
                background-position: -4800px 0;
            }
            17.307692307692307% {
                background-position: -5400px 0;
            }
            19.23076923076923% {
                background-position: -6000px 0;
            }
            21.153846153846153% {
                background-position: -6600px 0;
            }
            23.076923076923077% {
                background-position: -7200px 0;
            }
            25% {
                background-position: -7800px 0;
            }
            26.923076923076923% {
                background-position: -8400px 0;
            }
            28.846153846153847% {
                background-position: -9000px 0;
            }
            30.76923076923077% {
                background-position: -9600px 0;
            }
            32.69230769230769% {
                background-position: -10200px 0;
            }
            34.61538461538461% {
                background-position: -10800px 0;
            }
            36.53846153846154% {
                background-position: -11400px 0;
            }
            38.46153846153846% {
                background-position: -12000px 0;
            }
            40.38461538461539% {
                background-position: -12600px 0;
            }
            42.30769230769231% {
                background-position: -13200px 0;
            }
            44.23076923076923% {
                background-position: -13800px 0;
            }
            46.15384615384615% {
                background-position: -14400px 0;
            }
            48.07692307692308% {
                background-position: -15000px 0;
            }
            50% {
                background-position: -15600px 0;
            }
            51.92307692307692% {
                background-position: -16200px 0;
            }
            53.84615384615385% {
                background-position: -16800px 0;
            }
            55.76923076923077% {
                background-position: -17400px 0;
            }
            57.69230769230769% {
                background-position: -18000px 0;
            }
            59.61538461538461% {
                background-position: -18600px 0;
            }
            61.53846153846154% {
                background-position: -19200px 0;
            }
            63.46153846153846% {
                background-position: -19800px 0;
            }
            65.38461538461539% {
                background-position: -20400px 0;
            }
            67.3076923076923% {
                background-position: -21000px 0;
            }
            69.23076923076923% {
                background-position: -21600px 0;
            }
            71.15384615384616% {
                background-position: -22200px 0;
            }
            73.07692307692308% {
                background-position: -22800px 0;
            }
            75% {
                background-position: -23400px 0;
            }
            76.92307692307692% {
                background-position: -24000px 0;
            }
            78.84615384615384% {
                background-position: -24600px 0;
            }
            80.76923076923077% {
                background-position: -25200px 0;
            }
            82.6923076923077% {
                background-position: -25800px 0;
            }
            84.61538461538461% {
                background-position: -26400px 0;
            }
            86.53846153846153% {
                background-position: -27000px 0;
            }
            88.46153846153847% {
                background-position: -27600px 0;
            }
            90.38461538461539% {
                background-position: -28200px 0;
            }
            92.3076923076923% {
                background-position: -28800px 0;
            }
            94.23076923076923% {
                background-position: -29400px 0;
            }
            96.15384615384616% {
                background-position: -30000px 0;
            }
            98.07692307692308% {
                background-position: -30600px 0;
            }
            100% {
                background-position: 0 0;
            }
        }
    </style>

    <script>
        $(function() {
            let windowHeight = window.innerHeight;
            let commonScale = windowHeight / 1080;
            let height = 1080;
            let width = 1920
            $('.main').css({
                'margin-left': `${1920* commonScale/-2}px`,
                'width': `${1920* commonScale}px`,
                'height': `${windowHeight}px`,
                'background-image': 'url(http://ilab.imaginelearning.cn/loading/loading_blue_bg.png)',
                'background-size': '100% 100%',
                'top': 0
            })

            $('.bg').css({
                'width': `${width* commonScale}px`,
                'height': `${600* commonScale}px`
            })
            $('.xiaoxiang').css({
                // 'width': `${600* commonScale}px`,
                // 'height': `${600* commonScale}px`
                'width': `${600}px`,
                'height': `${600}px`,
                transform: `scale(${commonScale}) translate(-50%, -50%)`,
            })
        })
    </script>
</head>

<body>
    <div class="main">
        <div class="bg">
        </div>
        <div class="xiaoxiang">

        </div>
    </div>
</body>

</html>